$default-main-content-margin: 12px;

section.main-content-pod {
  &.showing-backlog {
    #sprints-container, #stats-container, #sprints-help-container {
      display: none;
    }
  }
  &.showing-sprints {
    margin-left: $default-main-content-margin;
    margin-right: $default-main-content-margin;
    #backlog-container, #stats-container, #sprints-help-container {
      display: none;
    }
    #sprints-container {
      margin-bottom: -15px;
    }
  }
  &.showing-stats {
    margin-left: $default-main-content-margin;
    margin-right: $default-main-content-margin;
    #sprints-container, #backlog-container, #sprints-help-container {
      display: none;
    }
  }
  &.showing-sprints-help {
    margin-left: $default-main-content-margin;
    margin-right: $default-main-content-margin;
    #sprints-container, #backlog-container, #stats-container {
      display: none;
    }
  }

  /* help to show a sprint is completed */
  h2.divider.completed {
    background-color: #CFC;
    &:after {
      content: ' (completed)';
    }
    &:before {
      content: '✔ ';
    }
  }
}
section.for-backlog {
  section.side-panel {
    margin-right: 15px;
    padding-left: 5px;
  }
}

section.showing-sprints {
  .all-stories {
    overflow: hidden;
    position: relative;
    margin-top: -70px;
    padding-top: 70px;
    .totals {
      margin-top: 10px;
      padding: 3px;
      border: 1px solid #BBB;
      border-width: 1px 0 1px 0;
      overflow: hidden;
      &.notice {
        padding: 0 20px 50px 20px;
        text-align: center;
        color: #666;
        border: none;
      }
      .title {
        float: left;
        .sprint-start-title {
          color: #666;
        }
      }
      .output {
        color: #666;
        float: right;
      }
      .amount {
        float: right;
        width: 40px;
        color: #000;
        clear: right;
        text-align: right;
      }
      .highlight {
        font-weight: bold;
        color: red;
      }
    }
    .complete-status {
      margin-top: 15px;
      a.bulk-move-stories {
        padding: 5px;
        color: #009;
        margin-left: 15px;
        &:hover {
          background-color: #FF9;
          text-decoration: none;
        };
        &:hover:after {
          content: " »";
        }
      }
    }
  }
  .stories-container .cards {
    min-height: 100px; /* for increased drop target when empty */
  }
  .unassigned-stories-container {
    min-height: 100px; /* for increased drop target when empty */
    padding-bottom: 15px;
    .notice, .read-only {
      text-align: center;
      color: #333;
      background-color: #FFC;
      padding: 5px;
      @include border-radius(5px)
    }
  }
  .stories-container {
    width: 70%;
    float: left;
    padding-bottom: 15px;
  }
  .unassigned-stories-container {
    margin-left: 73%;
    width: 27%;
  }
  .stories-divider {
    width: 1%;
    vertical-align: top;
    background-color: #CCC;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 49.5%;
    .handle {
      top: 23px;
      left: 100%;
      width: 100px;
      position: absolute;
      .change-size {
        display: inline;
        border: 1px solid #CCC;
        border-width: 1px 1px 1px 0;
        background-color: #FFF;
        padding: 2px 10px 4px 10px;
        @include border-radius(0 5px 5px 0);
        color: #666;
        cursor: pointer;
        &:after {
          content: " ⇉";
          display: inline;
          font-family: sans-serif;
        }
        &:before {
          display: none;
          content: "⇇ ";
          font-family: sans-serif;
        }
        &:hover {
          color: #000;
          background-color: #EEE;
        }
      }
    }
  }
  .unassigned-stories-heading {
    top: 0;
    width: 49.5%;
    left: 50%;
    height: 35px;
    padding: 20px 0 0 20px;
    position: absolute;
    font-size: 17px;
    font-family: $base-brand-font;
    text-align: center;
    color: $title-area-color;
  }

  .story-card {
    border: 1px solid #DDD;
    @include border-radius(3px);
    @include single-box-shadow(#EEE, 0, 0, 3px, 1px);
    margin-left: 1px;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    position: relative;
    background-color: #FFF;
    cursor: move;

    &.ui-sortable-helper {
      @include rotate(-3deg);
    }

    .fields {
      float: left;
      width: 20%;
      .code {
        padding: 4px;
        overflow: hidden;
      }
      .points {
        padding: 0 4px 4px 4px;
        overflow: hidden;
      }
      .status {
        padding: 0 4px 4px 4px;
        overflow: hidden;
        position: relative;
        min-height: 25px;
        .drop-down {
          display: none;
          position: absolute;
          select {
            font-size: 12px;
            height: 20px;
            @include status-code-colors(false);
          }
        }
        .tab {
          cursor: pointer;
          &.disabled {
            cursor: default;
          }
          background-color: lighten($title-area-color, 15%);
          color: white;
          font-size: 12px;
          padding: 1px 15px 1px 15px;
          @include border-radius(10px);
          display: inline;
          a {
            color: white;
            &:hover {
              text-decoration: none;
            }
          }
          &:hover {
            background-color: $title-area-color;
          }
          @include status-code-colors;
          @include status-code-arrows(1.25em);
          /* slight adjustments to icon and spacing as bigger font size */
          &.status-code-D {
            background-position-y: 3px;
            span {
              margin-left: 8px;
            }
          }
        }
      }
    }
    .story {
      float: left;
      width: 40%;
      >div {
        padding: 0 4px 0 4px;
        overflow: hidden;
      }
    }
    .acceptance-criteria {
      float: left;
      width: 40%;
      ol {
        margin: 0 4px 4px 0;
      }
    }

    .heading {
      color: rgba(0,0,0,0.6);
      float: left;
      padding-right: 0.25em;
    }

    .more {
      bottom: 0px;
      height: 0px;
      position: absolute;
      @include single-box-shadow(#CCC, 0, 0, 12px, 3px);
      width: 100%;
      display: none;
      .tab {
        cursor: pointer;
        bottom: 0px;
        position: absolute;
        background-color: #FFF;
        border: 1px solid #DDD;
        border-width: 1px 1px 0 0;
        @include border-radius(0 3px 0);
        padding: 0 1em 0 1em;
        font-size: 11px;
        color: #666;
        &:after {
          content: " ⇊";
          font-family: sans-serif;
          font-size: 13px;
        };
        &:hover {
          color: #000;
          background-color: #EEE;
        }
      }
      &.less {
        @include single-box-shadow(#000, 0, 0, 0, 0);
        .tab {
          &:after {
            content: " ⇈";
          }
        }
      }
    }

    .move {
      display: none;
    }

    &.hover {
      background-color: #FAFAFA;
      .move {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -21px;
        cursor: pointer;
        background-color: $title-area-color;
        color: #FFF;
        padding: 6px 15px 6px 15px;
        font-size: 20px;
        @include border-radius(10px 0 0 10px);
        @include opacity(0.75);
        &:after {
          content: " ⇉";
          font-family: sans-serif;
        }
        &:before {
          display: none;
          content: "⇇ ";
          font-family: sans-serif;
        }
        &:hover {
          @include opacity(1);
        }
      }
    }

    &.locked.hover {
      cursor: default;
      background-color: inherit;
      .move {
        display: none;
      }
    }
  }

  /* Move needs to be on the left hand side if story card is in unassigned-stories-container */
  .unassigned-stories-container {
    &:hover {
      .move {
        right: auto;
        left: 0;
        @include border-radius(0 10px 10px 0);
        &:after {
          display: none;
        }
        &:before {
          display: inline;
        }
      }
    }
  }

  .story-card-place-holder {
    border: 2px dashed #999;
    @include border-radius(3px);
    height: 90px;
    margin-top: 10px;
    background-color: #EEE;
  }

  .contracted-unassigned-stories {
    .unassigned-stories-container {
      .story-card {
        .fields {
          width: 35%;
        }
        .story {
          width: 65%;
        }
        .acceptance-criteria {
          display: none;
        }
      }
    }
    .stories-divider {
      .handle {
        left: auto;
        right: 0;
        text-align: right;
        padding-right: 100%;
        .change-size {
          border-width: 1px 0 1px 1px;
          @include border-radius(5px 0 0 5px);
          &:before {
            display: inline;
          }
          &:after {
            display: none;
          }
        }
      }
    }
  }
}

section.side-panel {
  .button-help {
    padding: 10px 10px 0 0;
    color: #666;
  }
}

#stats-container {
  .stats, .no-stats, .no-points {
    display: none;
  }
  .loading {
    margin-top: 2em;
    .icon {
      float: left;
      padding-right: 0.5em;
    }
  }
  .stats-placeholder {
    >div {
      margin: 2em auto 0 auto;
      border: 1px solid #DDD;
      width: 860px;
      height: 825px;
      background-image: image-url('stats-placeholder.png');
    }
  }
  .stats>div {
    width: 50%;
    float: left;
    h3 {
      padding: 10px 20px 5px 0;
      margin: 0;
      text-align: center;
      color: #000;
      font-size: 20px;
    }
    .chart {
      margin: 5px 20px 20px 0;
      &.has-options {
        margin-bottom: 0px;
      }
    }
    .options {
      height: 30px;
      text-align: center;
    }
    .box {
      padding: 10px;
      background-color: #EEE;
      @include border-radius(10px);
      margin: 5px 40px 0 40px;
      .notice {
        color: #666;
        text-align: center;
      }
      table.comparison {
        margin: 0 auto 25px auto;
        border-collapse: collapse;
        th {
          border-right: 1px solid #EEE;
          background-color: #999;
          color: white;
          padding: 1px 5px;
          &.empty {
            background-color: transparent;
          }
        }
        tr:nth-child(2) {
          border-bottom: 1px solid #CCC;
        }
        td {
          font-size: 30px;
          text-align: center;
          border-right: 1px solid #CCC;
          padding: 0 5px;
          &:first-child {
            text-align: right;
            padding-right: 15px;
          };
        }
      }
    }
  }
}

#dialog-move-sprint-stories {
  .progress-placeholder {
    font-weight: bold;
    font-style: italic;
  }
  .error-message {
    font-weight: bold;
    color: red;
  }
}